<template>
  <div id="container">
    <el-row>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="onePercentage" :color="oneCustomColors" :format="oneFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="twoPercentage" :color="twoCustomColors" :format="twoFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-progress :percentage="ThreePercentage" :color="ThreeCustomColors" :format="ThreeFormat" :stroke-width="3"></el-progress>
      </el-col>
      <el-col :span="2" :offset="1" style="line-height: 15px;">
        {{content}}
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "PasswordStrength",
    model: {
      event: 'change',
      prop: 'password'
    },
    props: {
      //密码
      password: {
        type: [String,Boolean,Number,Object],
        required: true,
        default: "",
      },
    },
    watch:{
      password(newValue){
        const mode = this.checkPasswordStrength(newValue);
        //逻辑处理
        switch (mode) {
          //初始化状态
          case 0:
            this.content = '';
            this.onePercentage = 0;
            this.twoPercentage = 0;
            this.ThreePercentage = 0;
            break;
          case 1:
            this.content = '弱';
            this.onePercentage = 100;
            this.twoPercentage = 0;
            this.ThreePercentage = 0;
            break;
          case 2:
            this.content = '中';
            this.onePercentage = 100;
            this.twoPercentage = 100;
            this.ThreePercentage = 0;
            break;
          case 3:
            this.content = '中';
            this.onePercentage = 100;
            this.twoPercentage = 100;
            this.ThreePercentage = 0;
            break;
          default:
            this.content = '高';
            this.onePercentage = 100;
            this.twoPercentage = 100;
            this.ThreePercentage = 100;
            break;
        }
      }
    },
    data(){
      return{
        content:"",
        onePercentage:0,
        twoPercentage:0,
        ThreePercentage:0,
        oneCustomColors: [
          {color: '#f56c6c', percentage: 100}
        ],
        twoCustomColors: [
          {color: '#e6a23c', percentage: 100}
        ],
        ThreeCustomColors: [
          {color: '#67c23a', percentage: 100}
        ]
      }
    },
    methods:{
      oneFormat() {
        return "";
      },
      twoFormat() {
        return "";
      },
      ThreeFormat() {
        return "";
      },
      //密码强度验证
      checkPasswordStrength(value) {
        let mode = 0;
        //正则表达式验证符合要求的
        if (value.length < 1) return mode;
        if (/\d/.test(value)) mode++; //数字
        if (/[a-z]/.test(value)) mode++; //小写
        if (/[A-Z]/.test(value)) mode++; //大写
        if (/\W/.test(value)) mode++; //特殊字符
        return mode;
      }
    }
  }
</script>

<style>
  .el-progress__text {
    display: none;
  }
  .el-progress-bar {
    padding-right: 0px;
    margin: 0px;
  }
</style>
